<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地址框</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css">
    <link rel="stylesheet" href="/resource/js/front/index.css">
    <script src="/resource/common/city-picker/city-picker.data.js"></script>
    <link href="/resource/common/city-picker/city-picker.css" rel="stylesheet"/>
</head>
<body style="padding: 0;">
<style>
    .layui-form-label {
        width: 75px;
    }

    .city-picker-span {
        margin-top: 9px;
    }

    . city-picker-dropdown {
        top: 17%;
        left: 125px;
    }
</style>
<div class="layui-form" lay-filter="useradd-iframe" id="useradd-iframe" style="padding: 0 40px 0 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label"><span>*</span>所在地区：</label>
        <input type="text" autocomplete="on" class="layui-input" id="city-picker" name="cityPicker" readonly="readonly"
               data-toggle="city-picker" placeholder="请选择" style="width: 529px;height: 22px;margin-top: 10px">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span>*</span>详细地址：</label>
        <div class="layui-input-block">
            <textarea lay-verify="required" name="detailAddress" placeholder="详细地址，街道、门牌号等"
                      class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span>*</span>收货人：</label>
        <div class="layui-input-inline">
            <input type="text" required lay-verify="required" name="consignee" class="layui-input">
        </div>
        <label class="layui-form-label telephone"><span>*</span>手机号码：</label>
        <div class="layui-input-inline">
            <input type="text" required lay-verify="required|phone" name="phone" class="layui-input">
        </div>
    </div>
    <input class="checkdef" type="checkbox" lay-skin="primary" name="isDefault" title="设为默认" value="1" checked>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="useradd-submit" id="useradd-submit" value="确认">
    </div>
</div>
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>
<script type="text/javascript" src="/resource/common/city-picker/city-picker.js"></script>
<script>
    layui.config({
        base: '/resource/' //静态资源所在路径
    }).extend({

        citypicker: '{/}/resource/common/city-picker/city-picker' // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['jquery', 'table', 'citypicker'], function () {
        var $ = layui.$
            , cityPicker = layui.citypicker;
        var currentPicker = new cityPicker("#city-picker", {
            provincename: "provinceId",
            cityname: "cityId",
            districtname: "districtId",
            level: 'districtId',// 级别
        });
        currentPicker.setValue("北京市/北京市/东城区");

    });
</script>

</body>
</html>